/**
 * 视频播放的一些扩展配置
 *
 * 默认的视频播放已经很好用了，当前工具类，扩展了一些事件，更便于用户操作。
 *
 * 默认的缺点：
 * - 没办法五倍播放，虽然播放器允许这个功能；
 * - 自适应大小的时候，切换视频过程中会发生抖动；
 *
 * 自定义播放器的难点，就是需要制作特殊进度条，提示展示：总时长、播放进度、缓存进度。
 */
const userVideo = () => {

    /**
     * 多媒体对象
     */
    let video: HTMLMediaElement = undefined;

    /**
     * 初始化多媒体对象
     * @param dom -
     */
    const setVideo = (dom: HTMLMediaElement) => {
        video = dom;
    }

    /**
     * 一些快捷键设置
     *
     * @param event 键盘事件
     */
    const keydownListener = (event: KeyboardEvent) => {
        event.preventDefault();
        if (event.code === 'Space') {
            // 空格键控制播放/暂停
            togglePlay();
        } else if (event.code === 'ArrowRight') {
            // 左右箭头控制快进快退
            video.currentTime += 5;
        } else if (event.code === 'ArrowLeft') {
            video.currentTime -= 5;
        } else if (event.code === 'KeyM') {
            // M键控制静音
            toggleMute();
        } else if (event.code === 'KeyF') {
            // F键控制全屏
            toggleFullscreen();
        }
    }

    /**
     * 绑定到键盘事件中
     */
    const bindEvent = () => {
        window.addEventListener('keydown', keydownListener);
    }

    /**
     * 接触键盘事件绑定
     */
    const unbindEvent = () => {
        window.removeEventListener('keydown', keydownListener);
    }

    /**
     * 暂停/正常播放
     *
     * 播放的时候，可能需要重新获取参数，故返回多媒体对象
     *
     * @returns 是否暂停
     */
    const togglePlay = (): Promise<HTMLMediaElement> => {
        if (video.paused) {
            return video.play().then(() => video);
        } else {
            video.pause();
            return Promise.resolve(video);
        }
    }

    /**
     * 静音/正常播放
     */
    const toggleMute = () => {
        video.muted = !video.muted;
    }

    /**
     * 全屏/正常显示
     */
    const toggleFullscreen = () => {
        if (!document.fullscreenElement) {
            if (video.requestFullscreen) {
                const ignore = video.requestFullscreen();
            } else if (video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) {
                video.msRequestFullscreen();
            }
        } else {
            if (document.exitFullscreen) {
                const ignored = document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    }

    /**
     * 将秒数转换为 HH:mm:ss 格式
     *
     * @param {number} seconds - 秒数（可以是整数或小数）
     * @returns {string} 格式化后的时间字符串（HH:mm:ss 或 mm:ss）
     */
    function formatTime(seconds: number) {
        // 处理无效输入
        if (isNaN(seconds) || seconds < 0) {
            return "00:00:00";
        }

        // 取整（避免小数秒影响计算）
        const secs = Math.floor(seconds);

        // 计算小时、分钟、秒
        const hours = Math.floor(secs / 3600);
        const minutes = Math.floor((secs % 3600) / 60);
        const remainingSeconds = secs % 60;

        // 补零（确保两位数）
        const pad = (num) => num.toString().padStart(2, "0");

        // 格式化结果
        if (hours > 0) {
            return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
        } else {
            return `${pad(minutes)}:${pad(remainingSeconds)}`; // 不满 1 小时时省略小时部分
        }
    }

    return {setVideo, bindEvent, unbindEvent, togglePlay, toggleMute, toggleFullscreen, formatTime}
}

export default userVideo;